'use strict';

import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import BaseStyle from '../constants/Style';
import PropTypes from 'prop-types';

/**
 * 使用方法
 * 
 * 
 * 1，关于 右边带清楚按钮的使用  把输入框变成可控
 * 
 * constructor(props) {
    super(props);
    this.state = {
      phone: '',
      isOpenClear: false
    };
  };
 <Input
            LeftIcon={'\ue605'}
            LeftText={"手机号"}
            placeholder={'请输入手机号码'}
            isOpenClear={this.state.isOpenClear}
            defaultValue={this.state.phone}
            keyboardType="numeric"
            maxLength={11}
            onChangeText={text => this.setState({ phone: text },()=>{
              this.state.phone.length > 0 ?
              this.setState({ isOpenClear: true })
              :
              this.setState({ isOpenClear: false })
            })}
          
            clear={() => {
             this.setState({ phone: '',isOpenClear:false })
            }}
          />

          
2. 关于 验证码输入框的使用

<Input
            LeftText={"验证码"}
            textAligin={'left'}
            isMsgInput={true}
            keyboardType="numeric"
            msgCodeText={'获取验证码'}
            placeholder={'请输入收到的验证码'}
            maxLength={6}
       
            onPress={
              () => { }
            }

          />
          <Input
            LeftText={"验证码"}
            textAligin={'left'}
            isMsgInput={true}
            keyboardType="numeric"
            msgCodeText={'60s'}
            placeholder={'请输入收到的验证码'}
            maxLength={6}
            MsgDisable={true}
            onPress={
              () => { }
            }

          />


 */

export default class Input extends Component {
  static defaultProps = {
    LeftIcon: '', //左边icon
    LeftText: '',
    LeftIconStyle: '',
    LeftTextStyle: '',
    textAligin: 'left',
    isOpenClear: false,
    style: {},
    keyboardType: 'default',
    returnKeyType: '',
    placeholder: '请输入相关内容',
    placeholderTextColor: '#cccccc',
    editable: true, //如果为fals文本不可编辑
    autoFocus: false,
    caretHidden: false,
    secureTextEntry: false,
    multiline: false,
    isMsgInput: false,
    MsgDisable: false,
    msgCodeText: '获取验证码',
    isImageMsg: false,
    MsgTextStyle: {},
    MsgButtonStyle: {},
    MsgButtonDisabledStyle: {},
    MsgTextDisabledStyle: {},
    ImageButtonStyle: {},
    ImageUri: '',
    isBase64: false,
  };
  static propTypes = {
    LeftIcon: PropTypes.string, //左边icon
    LeftText: PropTypes.string, //左边文字
    LeftIconStyle: PropTypes.object, //左边Icon样式
    LeftTextStyle: PropTypes.object, //左边文字样式，
    isOpenClear: PropTypes.bool, //是否开启右边清楚按钮
    isMsgInput: PropTypes.bool, //是否验证码输入框
    MsgDisable: PropTypes.bool, //验证码按钮是否禁用
    msgCodeText: PropTypes.string, //验证码按钮文字
    MsgTextStyle: PropTypes.object, //验证码文本样式
    MsgButtonStyle: PropTypes.object, //验证码按钮样式
    MsgButtonDisabledStyle: PropTypes.object, //验证码禁用时的按钮样式
    MsgTextDisabledStyle: PropTypes.object, //验证码禁用时的文本样式
    isImageMsg: PropTypes.bool, //是否是图形验证码
    ImageButtonStyle: PropTypes.object, //图形验证码样式
    ImageUri: PropTypes.string, //图形验证码图片地址
    isBase64: PropTypes.bool, //是否是base64的图片
    style: PropTypes.object, //输入框样式，
    textAligin: PropTypes.string, //文本对其方式
    keyboardType: PropTypes.string, //键盘类型
    maxLength: PropTypes.number, // 最大长度
    returnKeyType: PropTypes.string, //键盘的弹出收回类型
    placeholder: PropTypes.string, //placeholder
    placeholderTextColor: PropTypes.string, //placeholder 颜色
    editable: PropTypes.bool, //是否禁用
    autoFocus: PropTypes.bool, //是否自动聚焦
    caretHidden: PropTypes.bool, //是否隐藏光标
    secureTextEntry: PropTypes.bool, //是否开启密码显示
    defaultValue: PropTypes.string, //输入框默认值
    multiline: PropTypes.bool, //是否允许多行输入
    onChange: PropTypes.func, //当文本框内容变化时调用此回调函数
    onBlur: PropTypes.func, //当文本框失去焦点的时候调用此回调函数。
    onChangeText: PropTypes.func, //当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递
    onFocus: PropTypes.func, //当文本框获得焦点的时候调用此回调函数。
    clear: PropTypes.func, //清楚操作
    onPress: PropTypes.func, //验证码的发送操作
    onPressImage: PropTypes.func, //图形验证码的操作
  };

  constructor(props) {
    super(props);
  }

  render() {
    const {
      LeftIcon,
      LeftText,
      LeftIconStyle,
      LeftTextStyle,
      isOpenClear,
      style,
      textAligin,
      keyboardType,
      maxLength,
      returnKeyType,
      placeholder,
      placeholderTextColor,
      editable,
      autoFocus,
      caretHidden,
      secureTextEntry,
      defaultValue,
      multiline,
      onChange,
      onBlur,
      onChangeText,
      onFocus,
      clear,
      isMsgInput,
      msgCodeText,
      MsgTextStyle,
      MsgButtonStyle,
      MsgDisable,
      MsgButtonDisabledStyle,
      MsgTextDisabledStyle,
      isImageMsg,
      ImageButtonStyle,
      ImageUri,
      isBase64,
      onPress,
      onPressImage,
    } = this.props;
    const textAlignStyle =
      textAligin === 'left'
        ? { textAlign: 'left', marginLeft: 5 }
        : textAligin === 'right'
          ? { textAlign: 'right' }
          : null;
    const changeLeftStyle = LeftIcon ? { marginLeft: 5 } : null;
    const baseImage = isBase64 ? `data:image/png;base64,${ImageUri}` : ImageUri; //base64图片处理
    return (
      <View style={styles.inputView}>
        <View style={styles.leftView}>
          <Text style={[styles.leftIcont, LeftIconStyle]}>{LeftIcon}</Text>
          <Text style={[styles.leftText, LeftTextStyle, changeLeftStyle]}>
            {LeftText}
          </Text>
        </View>
        <TextInput
          style={[styles.textInputStyle, style, textAlignStyle]}
          underlineColorAndroid="transparent"
          keyboardType={keyboardType}
          maxLength={maxLength}
          returnKeyType={returnKeyType}
          placeholder={placeholder}
          placeholderTextColor={placeholderTextColor}
          editable={editable}
          autoFocus={autoFocus}
          caretHidden={caretHidden}
          secureTextEntry={secureTextEntry}
          defaultValue={defaultValue}
          multiline={multiline}
          onChange={onChange}
          onBlur={onBlur}
          onChangeText={onChangeText}
          onFocus={onFocus}
        />
        {isOpenClear ? (
          <TouchableOpacity onPress={clear}>
            <Text style={styles.closeIcon}>&#xe620;</Text>
          </TouchableOpacity>
        ) : null}
        {isMsgInput ? (
          MsgDisable ? (
            <View style={[styles.MsgButtonDisabled, MsgButtonDisabledStyle]}>
              <Text style={[styles.MsgTextDisabled, MsgTextDisabledStyle]}>
                {msgCodeText}
              </Text>
            </View>
          ) : (
            <TouchableOpacity
              style={[styles.MsgButton, MsgButtonStyle]}
              onPress={() => {
                onPress;
              }}>
              <Text style={[styles.MsgText, MsgTextStyle]}>{msgCodeText}</Text>
            </TouchableOpacity>
          )
        ) : null}
        {isImageMsg ? (
          <TouchableOpacity
            style={[styles.ImageButton, ImageButtonStyle]}
            onPress={() => {
              onPressImage;
            }}>
            <Image
              style={[styles.ImageButton, ImageButtonStyle]}
              source={{ uri: baseImage }}
            />
          </TouchableOpacity>
        ) : null}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  inputView: {
    ...BaseStyle.row,
    ...BaseStyle.alignItemsCenter,
    paddingLeft: 15,
    paddingRight: 15,
    height: 60,
    borderBottomColor: '#eeeeee',
    borderBottomWidth: 1,
    // backgroundColor:"red"
  },

  textInputStyle: {
    flex: 1,
    fontSize: 15,
    height: 60,
    padding: 0,
    textAlign: 'right',
  },
  leftView: {
    ...BaseStyle.row,
  },
  leftIcont: {
    fontFamily: 'iconfont',
    fontSize: 15,
    color: '#333',
  },
  leftText: {
    fontSize: 15,
    color: '#333',
  },
  closeIcon: {
    fontFamily: 'iconfont',
    fontSize: 14,
    color: '#cccccc',
  },
  MsgButton: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    width: 90,
    height: 35,
    borderWidth: 1,
    borderColor: '#31bcfe',
    borderRadius: 4,
    backgroundColor: '#effaff',
  },
  MsgText: {
    fontSize: 14,
    color: '#31bcfe',
  },
  MsgButtonDisabled: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    width: 90,
    height: 35,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    backgroundColor: '#ccc',
  },
  MsgTextDisabled: {
    fontSize: 14,
    color: '#fff',
  },
  ImageButton: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    width: 90,
    height: 35,
  },
});
